<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>发送消息：</div>
		<input type="text" id="msgContent" />
		<input type="button" value="点我发送" onclick="CHAT.chat()" />
	
		<div>接收消息：</div>
		<div type="receiveMsg" style="background-color: gainsboro;"></div>
		
		<script type="application/javascript">
			window.CHAT = {
				socket:null,
				init: function(){
					/** ie6 7 是不支持 websocket 协议的 */
					if(window.WebSocket){
						CHAT.socket = new WebSocket("ws://127.0.0.1:8089/ws");
						CHAT.socket.onopen = function(){
							console.log("连接建立成功 ...");
						},
						CHAT.socket.onclose = function(){
							console.log("连接关闭 ...");
						},
						CHAT.socket.onerror = function(){
							console.log("发生错误 ...");
						},
						CHAT.socket.onmessage = function(e){
							console.log("接收到消息 ..." + e.data);
						    var receiveMsg = document.getElementById("receiveMsg");
							var html = receiveMsg.innerHTML;
							console.log(e.data)
							receiveMsg.innerHTML = html + "<br/>" +e.data;
						}

					}else{
						alert("浏览器不支持 websocket 协议 ...");
					}
				},
				chat: function(){
					var msg = document.getElementById("msgContent");
					CHAT.socket.send(msg.value);
				}
			}
			
			/** 加载完毕后，对 websocket 进行初始化 */
			CHAT.init();
			
		</script>
	</body>
</html>
